<template>
  <div :class="['HeZuoZxPanel',showOrHideCls]">
    <div class="view">
      <div class="btnDiv">
        <div :class='["item",(selectId===sz_501?"select":"")]' @click="btnClick(sz_501)" >合作流程</div>
        <div :class='["item",(selectId===sz_502?"select":"")]' @click="btnClick(sz_502)" >合作条件</div>
        <div :class='["item",(selectId===sz_503?"select":"")]' @click="btnClick(sz_503)" >项目优势</div>
        <div :class='["item",(selectId===sz_504?"select":"")]' @click="btnClick(sz_504)" >项目支持</div>
      </div>
      <div class="contentDiv">
        <template v-if="_501Data.data!==null">
          <!--合作流程-->
          <div :class='["imgDiv",(selectId===sz_501?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='_501Data.data.dataList[0].imgUrl' :alt="_501Data.data.dataList[0].imgAlt" :title="_501Data.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
          <!--合作条件-->
          <div :class='["imgDiv",(selectId===sz_502?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='_502Data.data.dataList[0].imgUrl' :alt="_502Data.data.dataList[0].imgAlt" :title="_502Data.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
          <!--项目优势-->
          <div :class='["imgDiv",(selectId===sz_503?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='_503Data.data.dataList[0].imgUrl' :alt="_503Data.data.dataList[0].imgAlt" :title="_503Data.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
          <!--项目支持-->
          <div :class='["imgDiv",(selectId===sz_504?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='_504Data.data.dataList[0].imgUrl' :alt="_504Data.data.dataList[0].imgAlt" :title="_504Data.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>


<style scoped>
.HeZuoZxPanel{
  position: relative;background: #F6F8E3;
}

.view{
  font-size: 16px;padding-top: 50px;margin: auto;max-width: 1100px;
}
.view div{
  position: relative;
}
.btnDiv{
  background: #F3F3A5;color: #7EAF49;margin: auto;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.btnDiv .item {
  position: relative;width: 25%;height: 35px;line-height: 35px;border-left: 1px solid white;border-right: 1px solid white;cursor: pointer;
}
.btnDiv .select{
  background: #7EAF49;color: #FFFFFF;
}

.contentDiv{
  padding-top: 30px;padding-bottom: 70px;
  font-size: 18px;color: #3E3A39;line-height: 30px;
}
/**合作中心***/
.imgDiv{
  padding-top: 100px;padding-bottom: 50px;
}
.imgDiv .dingw{
  padding-bottom: 50px;
}

.imgDiv .dingw .img{

}
.imgDiv .dingw .img img{
  width: 100%;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";


let store = useStore();
let sz_501=501;let sz_502=502;let sz_503=503;let sz_504=504;
/**501:"合作流程" 502:"合作条件"   503:"项目优势"    504:"项目支持"**/
let selectId=ref(sz_501);
//合作流程
let _501Data=reactive({data:null});
//合作条件
let _502Data=reactive({data:null});
//项目优势
let _503Data=reactive({data:null});
//项目支持
let _504Data=reactive({data:null});

onMounted(() => {
  console.log("HeZuoZxPanel onMounted 合作中心一级页面 初始化");
  store.state.channelId=Enum.cId_5;
  window.scrollTo(0, 0);
  getSrsData();
});


onBeforeUnmount(() => {
  console.log('HeZuoZxPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("HeZuoZxPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let btnClick=(id)=>{
  console.log("HeZuoZxPanel btnClick ",id);
  if(selectId.value===id)return;
  selectId.value=id;
}
let getSrsData=()=>{
  if(store.state.heZuoZxData===null){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_5},
      success: function(data) {
        //console.log("HeZuoZxPanel getChannelListById 合作中心",data);
        store.state.heZuoZxData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList:data.content.list[0].datalist);
        console.log("HeZuoZxPanel getSrsData 合作中心",store.state.heZuoZxData);
        setDataHandler();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }else{
    setDataHandler();
  }
}

let setDataHandler=()=>{
  if(_501Data.data==null){
    for(let i=0;i<store.state.heZuoZxData.length;i++){

      if(store.state.heZuoZxData[i].channelId===sz_502){
        _502Data.data=store.state.heZuoZxData[i];
      }
      if(store.state.heZuoZxData[i].channelId===sz_503){
        _503Data.data=store.state.heZuoZxData[i];
      }
      if(store.state.heZuoZxData[i].channelId===sz_504){
        _504Data.data=store.state.heZuoZxData[i];
      }
      if(store.state.heZuoZxData[i].channelId===sz_501){
        _501Data.data=store.state.heZuoZxData[i];
      }
    }
  }
}
</script>




